<template>
  <div
    class="transer"
    :style="{
      width: width + 'px',
    }"
  >
    <!-- 左侧框 -->
    <div class="transfer-panel">
      <div class="title">可选字段</div>
      <div class="transfer-content">
        <div
          style="cursor: pointer"
          v-for="item in OptionalArr"
          :key="item.key"
          @click="onClick('optional', item.key)"
          :class="{ active: optionActive === item.key }"
        >
          <span class="label">{{ item.label }}</span>
        </div>
      </div>
    </div>
    <!-- 中间按钮 -->
    <div class="transfer-button">
      <el-button
        icon="el-icon-arrow-right"
        :disabled="btnRightDisabled"
        @click="clickRight"
      ></el-button>
      <el-button
        icon="el-icon-arrow-left"
        :disabled="btnLeftDisabled"
        @click="clickLeft"
      ></el-button>
      <el-button
        icon="el-icon-arrow-up"
        @click="clickUp"
        :disabled="btnUpDisabled"
      ></el-button>
      <el-button
        icon="el-icon-arrow-down"
        :disabled="btnDownDisabled"
        @click="clickDown"
      ></el-button>
    </div>
    <!-- 右侧容器 -->
    <div class="transfer-panel">
      <div class="title">当前选定的字段</div>
      <div class="transfer-content">
        <div
          style="cursor: pointer"
          v-for="item in currentArr"
          :key="item.key"
          @click="onClick('current', item.key)"
          :class="{ active: currentActive === item.key }"
        >
          <span class="label">{{ item.label }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "transer",
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    value: {
      type: Array,
      default: () => [],
    },
    width: {
      type: String,
      default: "500",
    },
  },
  data() {
    return {
      currentActive: "", // 当前字段的选中状态
      optionActive: "", // 可选字段的选中状态
      currentIndex: "", // 选中字段的索引
      btnUpDisabled: false, // 控制按钮禁用
      currentArr: [], // 当前字段
      btnRightDisabled: false, // 控制按钮禁用
      btnLeftDisabled: false, // 控制按钮禁用
      btnDownDisabled: false, // 控制按钮禁用
    };
  },
  computed: {
    // 可选字段
    OptionalArr: {
      get() {
        return this.dataArr.filter((item) => !this.value.includes(item.key));
      },
    },

    dataArr: {
      get() {
        return this.data;
      },
    },
  },
  methods: {
    // 点击下按钮
    clickDown() {
      if (this.optionActive || !this.currentActive) return;
      const index = this.currentArr.findIndex(
        (item) => item.key === this.currentActive
      );
      // 切割并获取下标的数组
      const res = this.currentArr.splice(index, 1);
      //  重新添加到该下标的前面
      this.currentArr.splice(index + 1, 0, ...res);
      // 重新获取状态
      this.onClick("current", this.currentActive);
    },
    // 点击上按钮
    clickUp() {
      // 判断是否选中 或 如果是可选字段，则退出
      if (this.optionActive || !this.currentActive) return;
      // 获取下标
      const index = this.currentArr.findIndex(
        (item) => item.key === this.currentActive
      );
      // 切割并获取下标的数组
      const res = this.currentArr.splice(index, 1);
      //  重新添加到该下标的前面
      this.currentArr.splice(index - 1, 0, ...res);
      // 重新获取状态
      this.onClick("current", this.currentActive);
    },
    // 点击左按钮
    clickLeft() {
      // 判断当前字段是否激活
      if (!this.currentActive) return;
      this.$emit(
        "input",
        this.value.filter((item) => item !== this.currentActive)
      );
      // 重新获取激活状态
      this.onClick("optional", this.currentActive);
    },
    // 点击右按钮
    clickRight() {
      // 判断是否可选字段激活
      if (!this.optionActive) return;
      this.$emit("input", [...this.value, this.optionActive]);
      // 重新获取激活状态
      this.onClick("current", this.optionActive);
    },
    // 点中字段触发事件 传递第一个type判断为“可选”或“当前”
    onClick(type, key) {
      // 清空状态
      this.clearActive();
      // 判断点击字段类型
      switch (type) {
        case "optional":
          // 禁用左、下、上箭头
          this.btnLeftDisabled = true;
          this.btnDownDisabled = true;
          this.btnUpDisabled = true;
          // 将key值赋值激活状态
          this.optionActive = key;
          // 由于获取索引有时不准确，所以加上this.$nextTick
          this.$nextTick(() => {
            this.currentIndex = this.OptionalArr.findIndex(
              (item) => item.key === key
            );
            // 如果是索引为0，则禁止上箭头
            if (this.currentIndex === 0) {
              this.btnUpDisabled = true;
            }
          });
          return;
        case "current":
          // 禁用右箭头
          this.btnRightDisabled = true;
          // 将key值赋值激活状态
          this.currentActive = key;
          // 由于获取索引有时不准确，所以加上this.$nextTick
          this.$nextTick(() => {
            this.currentIndex = this.currentArr.findIndex(
              (item) => item.key === key
            );

            // 如果是索引为0，则禁止上箭头
            if (this.currentIndex === 0) {
              this.btnUpDisabled = true;
            }
            // 如果索引为最后一项，则禁止下箭头
            if (this.currentIndex === this.currentArr.length - 1) {
              this.btnDownDisabled = true;
            }
          });
          return;
        default:
          return;
      }
    },
    //  清除选中状态
    clearActive() {
      this.optionActive = "";
      this.currentActive = "";
      // 将禁用状态关闭
      this.btnUpDisabled = false;
      this.btnRightDisabled = false;
      this.btnLeftDisabled = false;
      this.btnDownDisabled = false;
    },
  },
  watch: {
    // 监听value的改变，重新调用过滤新数组
    value: {
      handler() {
        this.currentArr = this.dataArr.filter((item) =>
          this.value.includes(item.key)
        );
      },
      immediate: true,
    },
  },
};
</script>

<style>
.transer {
  display: flex;
}
/* 左侧容器 */
.transfer-panel {
  overflow: hidden;
  background: #fff;
  display: inline-block;
  vertical-align: middle;
  width: 200px;
  max-height: 100%;
  box-sizing: border-box;
  position: relative;
}
.transfer-panel .title {
  font-size: 12px;
  color: #aeaeae;
}
.transfer-panel .transfer-content {
  /* padding-left: 10px; */
  font-size: 14px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  height: 246px;
  overflow: auto;
  color: #7a7a7a;
}
/* 文字样式 */
.label {
  display: inline-block;
  margin-left: 10px;
}
/* 中间按钮 */
.transfer-button {
  display: flex;
  flex: 1;
  margin: 0;
  align-self: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.transfer-button .el-button {
  text-align: center;
  width: 60px;
  margin: 0 0 10px 0 !important;
}
.active {
  background-color: #ccc;
  color: #40b8ff;
}
</style>
